<template>
    <div id="propertyDetail">
        <div class="container-fluid" id="dorm-preview">
            <header>
                <img src="" alt="">
            </header>
            <h3>紫晶城小区>03栋>1单元>502室</h3>
            <div id="dorm-show">
                <div class="row">
                    <div class="col-8">
                        <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active w-100">
                                    <img class="d-block w-100" src="#" alt="First slide">
                                </div>
                                <div class="carousel-item w-100">
                                    <img class="d-block w-100" src="#" alt="Second slide">
                                </div>
                                <div class="carousel-item w-100">
                                    <img class="d-block w-100" src="#" alt="Third slide">
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                               data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                               data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    <div class="col-4">
                        <h2>宿舍名称</h2>
                        <hr>
                        <div class="py-2 information">
                            <div>
                                宿舍地址: <span>xxx小区xx栋x单元xxx室</span>
                            </div>
                            <div>
                                宿舍编号: <span>xxxxxxxxxxxx</span>
                            </div>
                            <div>
                                所在区域: <span>xxx区xxx路xxx号</span>
                                <a-button type="primary">
                                    <a-icon type="environment" theme="twoTone"/>
                                    <span>查看地图</span></a-button>
                            </div>
                            <div>
                                入住状态: x人入住(x满)
                                <a-button type="primary">
                                    <a-icon type="audit"/>
                                    <span>申请入住</span></a-button>
                            </div>
                        </div>
                        <hr>
                        <div>
                            <h4>子标题</h4>
                            <div>
                                内容内容内容内容内容内容内容内容
                            </div>
                            <div>2020-12-25</div>
                            <div class="text-right">
                                <a-button type="primary" class="px-5">
                                    <a-icon type="camera"/>
                                    <span>三维浏览</span></a-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="dorm-info" class="container-fluid p-3 mt-3" style="background-color: #ccc;">
            <div class="row border p-3" style="background-color: #fff;">
                <div class="col-7">
                    <h2>宿舍信息</h2>
                    <hr>
                    <div>基本信息:</div>
                    <div class="d-flex justify-content-between align-items-center flex-wrap info">
                        <div>房屋户型：X室X厅X厨X卫</div>
                        <div>所在楼层：X层（共X层）</div>
                        <div>建筑面积：XX.XX m²</div>
                        <div>户型结构：XX户型</div>
                        <div>套内面积：XX.XX m²</div>
                        <div>房屋朝向：XX朝向</div>
                        <div>装修状况：X装修</div>
                        <div>梯户比例：X梯X户</div>
                        <div>建筑类型：XX类型</div>
                        <div>建筑结构：XX结构</div>
                        <div>配置电梯：X</div>
                    </div>
                    <hr>
                    <div>其他信息:</div>
                    <div class="d-flex justify-content-between align-items-center info flex-wrap">
                        <div>房屋户型：X室X厅X厨X卫</div>
                        <div>所在楼层：X层（共X层）</div>
                        <div>建筑面积：XX.XX m²</div>
                        <div>户型结构：XX户型</div>
                        <div>套内面积：XX.XX m²</div>
                        <div>房屋朝向：XX朝向</div>
                        <div>装修状况：X装修</div>
                        <div>梯户比例：X梯X户</div>
                        <div>建筑类型：XX类型</div>
                        <div>建筑结构：XX结构</div>
                        <div>配置电梯：X</div>
                    </div>
                    <div class="dorm-characteristic my-3">
                        <h2>宿舍特色</h2>
                        <hr>
                        <div class="d-flex justify-content-around align-items-center">
                            <span>宿舍标签:</span>
                            <div class="col-10">
                                <a-tag>标签一</a-tag>
                                <a-tag>标签二</a-tag>
                                <a-tag>标签三</a-tag>
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-around align-items-center">
                            <span>宿舍介绍: </span>
                            <div class="col-10">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius fugit quae quasi
                                recusandae soluta? Aliquid consectetur, cupiditate illum magnam maiores nulla
                                perferendis porro praesentium reprehenderit sequi totam veniam. Nobis, sunt?
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-around align-items-center">
                            <span>配套设施: </span>
                            <div class="col-10">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, cumque, cupiditate
                                dicta esse inventore iste nemo non odit officiis quae quaerat, quo sed sit unde vitae.
                                Animi at deleniti quibusdam.
                            </div>
                        </div>
                    </div>
                    <div class="location">
                        <h2>宿舍位置</h2>
                        <hr>
                    </div>
                </div>
                <div class="col-5 mt-5">
                    <div class="w-75 mx-auto p-3" style="height: 300px;background-color: #ddd;">
                        <h3 class="text-center">宿舍申请</h3>
                        <hr>
                        <div class="row justify-content-center align-items-center px-3 mb-3">
                            <label for="user-input" class="col-4">申请人: </label>
                            <input type="text" class="form-control col-8" placeholder="请输入申请人" id="user-input">
                        </div>
                        <div class="row justify-content-center align-items-center px-3 mb-3">
                            <label for="phone-input" class="col-4">联系方式:</label>
                            <input type="text" class="form-control col-8" placeholder="请输入手机号码" id="phone-input">
                        </div>
                        <div class="row justify-content-between align-items-center px-3 mb-3">
                            <label for="captcha-input" class="col-3">验证码: </label>
                            <input type="text" class="form-control col-4" placeholder="验证码" id="captcha-input">
                            <a-button type="primary" class="col-4">获取验证码</a-button>
                        </div>
                        <a-button type="primary" block><a-icon type="check"  /><span>提交申请</span></a-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "propertyDetail",
    }
</script>

<style scoped>
    .carousel-item img {
        width: 500px;
        height: 400px;
    }

    #dorm-show {
        padding: 30px;
        border: 1px solid #ccc;
    }

    .information div {
        margin: 10px;
    }

    button > span {
        vertical-align: middle;
    }

    .info {
        padding-left: 55px;
    }

    .info div {
        width: 250px;
        margin: 10px;
    }
</style>
